<template>
  <ga-select
    v-model="localAppCategory"
    placeholder="选择应用名称"
    :style="{width:width}"
    :allow-clear="allowClear"
    :multiple="multiple"
    @change="handleChange"
  >
    <ga-option
      v-for="(item, index) in appList"
      :key="index"
      :label="item[keyValue.key]"
      :value="item[keyValue.value]"
    />
  </ga-select>
</template>

<script setup>
  import { ref, watch, computed } from 'vue';

  const props = defineProps({
    keyValue: { type: Object, required: true,  default: () => ({ key: 'label', value: 'appname' }) },
    appCategory: { type: String, required: true, default: '' },
    allowClear: { type: Boolean, required: true, default: false },
    multiple: { type: Boolean, required: true, default: false },
    width: { type: String, required: true, default: '240px' },
  });
  const localAppCategory = ref(props.appCategory);

  watch(
    () => props.appCategory,
    (newValue) => {
      localAppCategory.value = newValue;
    }
  );
  // 获取应用列表
  const appList = computed(() => {
    return JSON.parse(localStorage.getItem('applyList'));
  });
  // 处理方法
  const emit = defineEmits(['update:appCategory','handleChange']);
  const handleChange = (value) => {
    emit('update:appCategory', value);
    emit('handleChange', value);
  };
</script>

<style scoped lang="scss"></style>
